<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-03 14:45:27
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-12-25 11:44:51
 * @FilePath: \hbzc-groupmeal-center-web\src\Public-UIlibrary\pb-button\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <button :class="pbClass" :disabed="disabled" @click="onClick">
    <slot></slot>
  </button>
</template>

<script setup lang="ts">
import { defineProps, withDefaults, defineEmits } from "vue";
import { useDebounceFn, useThrottleFn } from "@vueuse/core";

/**
 * @param type 按钮类型 可选值（'primary' 'success' 'warning' 'danger') 默认primary
 * @param disabled 是否开启禁用 默认false
 * @param plain 是否开启线框 默认false
 * @param size 按钮尺寸 可选值（'large' 'small' 'super-small')
 * @param text 是否为文字按钮   默认false
 * @param secondary 设计图次要按钮
 * @param icon 内置icon
 */
const props = withDefaults(
  defineProps<{
    type?: string;
    disabled?: boolean;
    plain?: boolean;
    size?: string;
    icon?: string;
    text?: boolean;
    secondary?: boolean;
  }>(),
  {
    type: "primary",
    size: "",
    text: false,
    disabled: false,
    plain: false,
    secondary: false,
  }
);

const pbClass = computed(() => {
  return [
    "pb-button",
    `pb-button-${props.type}`,
    props.size ? `pb-button-${props.size}` : "",
    props.plain ? "pb-button-plain" : "",
    props.text ? "is-text" : "",
    props.disabled ? "is-disabled" : "",
    props.secondary ? "pb-button-secondary" : "",
  ];
});

const emits = defineEmits(["click"]);

const onClick = useThrottleFn(() => {
  emits("click");
}, 300);
</script>

<style lang="scss" scoped>
.is-text {
  background: none !important;
  border: none !important;
  padding: 0;
}

.is-disabled {
  cursor: not-allowed !important;
}

.pb-button {
  height: fit-content;
  border: 0;
  outline: none;
  background: none;
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  padding: 10px 24px;
  border-radius: 4px;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  display: inline-block;
}

.pb-button-large {
  padding: 10px 40px;
  font-size: 18px;
}

.pb-button-small {
  padding: 5px 16px;
  font-size: 14px;
}

.pb-button-super-small {
  padding: 3px 12px;
  font-size: 12px;
}

.pb-button-primary {
  background: var(--pb-color-primary);
  color: #ffffff;

  &:hover {
    background: var(--pb-color-primary-light-5);
  }

  &:active {
    background: var(--pb-color-primary-light-8);
  }
}

.pb-button-success {
  color: #ffffff;
  background: var(--pb-color-success);

  &:hover {
    background: var(--pb-color-success-light-6);
  }

  &:active {
    background: var(--pb-color-success-light-8);
  }
}

.pb-button-warning {
  color: #ffffff;
  background: var(--pb-color-warning);

  &:hover {
    background: var(--pb-color-warning-light-5);
  }

  &:active {
    background: var(--pb-color-warning-light-7);
  }
}

.pb-button-danger {
  color: #ffffff;
  background: var(--pb-color-danger);

  &:hover {
    background: var(--pb-color-danger-light-5);
  }

  &:active {
    background: var(--pb-color-danger-light-7);
  }
}

.is-disabled {
  background: none;
  border: none;
}

.pb-button-primary.is-text {
  @extend .is-text;
  color: var(--pb-color-primary);

  &:hover {
    color: var(--pb-color-primary-light-5);
  }

  &:active {
    color: var(--pb-color-primary-light-8);
  }
}

.pb-button-primary.is-text.is-disabled {
  @extend .is-disabled;
  color: var(--pb-color-primary-light-2);

  &:hover,
  &:active {
    @extend .is-disabled;
    color: var(--pb-color-primary-light-2);
  }
}

.pb-button-success.is-text {
  @extend .is-text;
  color: var(--pb-color-success);

  &:hover {
    color: var(--pb-color-success-light-5);
  }

  &:active {
    color: var(--pb-color-success-light-8);
  }
}

.pb-button-success.is-text.is-disabled {
  @extend .is-disabled;
  color: var(--pb-color-success-light-3);

  &:hover,
  &:active {
    @extend .is-disabled;
    color: var(--pb-color-success-light-3);
  }
}

.pb-button-warning.is-text {
  @extend .is-text;
  color: var(--pb-color-warning);

  &:hover {
    color: var(--pb-color-warning-light-5);
  }

  &:active {
    color: var(--pb-color-warning-light-7);
  }
}

.pb-button-warning.is-text.is-disabled {
  @extend .is-disabled;
  color: var(--pb-color-warning-light-3);

  &:hover,
  &:active {
    @extend .is-disabled;
    color: var(--pb-color-warning-light-3);
  }
}

.pb-button-danger.is-text {
  @extend .is-text;
  color: var(--pb-color-danger);

  &:hover {
    color: var(--pb-color-danger-light-5);
  }

  &:active {
    color: var(--pb-color-danger-light-7);
  }
}

.pb-button-danger.is-text.is-disabled {
  @extend .is-disabled;
  color: var(--pb-color-danger-light-3);

  &:hover,
  &:active {
    @extend .is-disabled;
    color: var(--pb-color-danger-light-3);
  }
}

.pb-button-primary.is-disabled {
  background: var(--pb-color-primary-light-2);

  &:hover,
  &:active {
    background: var(--pb-color-primary-light-2);
  }
}

.pb-button-success.is-disabled {
  background: var(--pb-color-success-light-3);

  &:hover,
  &:active {
    background: var(--pb-color-success-light-3);
  }
}

.pb-button-warning.is-disabled {
  background: var(--pb-color-warning-light-3);

  &:hover,
  &:active {
    background: var(--pb-color-warning-light-3);
  }
}

.pb-button-danger.is-disabled {
  background: var(--pb-color-danger-light-3);

  &:hover,
  &:active {
    background: var(--pb-color-danger-light-3);
  }
}

.pb-button-danger.pb-button-plain {
  background: #ffffff;
  border: 1px solid var(--pb-color-danger);
  color: var(--pb-color-danger);

  &:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  &:active {
    background: var(--pb-color-danger-light-3);
  }
}

.pb-button-primary.pb-button-plain {
  background: #ffffff;
  border: 1px solid var(--pb-color-primary);
  color: var(--pb-color-primary);

  &:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  &:active {
    background: var(--pb-color-primary-light-1);
  }
}

.pb-button-success.pb-button-plain {
  background: #ffffff;
  border: 1px solid var(--pb-color-success);
  color: var(--pb-color-success);

  &:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  &:active {
    background: var(--pb-color-success-light-1);
  }
}

.pb-button-warning.pb-button-plain {
  background: #ffffff;
  border: 1px solid var(--pb-color-warning);
  color: var(--pb-color-warning);

  &:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  &:active {
    background: var(--pb-color-warning-light-1);
  }
}

.pb-button-primary.pb-button-plain.is-disabled {
  background: #ffffff;
  color: var(--pb-color-primary-light-2);
  border: 1px solid var(--pb-color-primary-light-2);

  &:hover,
  &:active {
    background: #ffffff;
  }
}

.pb-button-success.pb-button-plain.is-disabled {
  background: #ffffff;
  color: var(--pb-color-success-light-3);
  border: 1px solid var(--pb-color-success-light-3);

  &:hover,
  &:active {
    background: #ffffff;
  }
}

.pb-button-warning.pb-button-plain.is-disabled {
  background: #ffffff;
  color: var(--pb-color-warning-light-3);
  border: 1px solid var(--pb-color-warning-light-3);

  &:hover,
  &:active {
    background: #ffffff;
  }
}

.pb-button-danger.pb-button-plain.is-disabled {
  background: #ffffff;
  color: var(--pb-color-danger-light-3);
  border: 1px solid var(--pb-color-danger-light-3);

  &:hover,
  &:active {
    background: #ffffff;
  }
}

.pb-button-secondary {
  background: #ffffff;
  color: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.15);

  &:active {
    color: rgba(0, 0, 0, 0.85);
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.15);
  }
}

.pb-button-primary.pb-button-secondary {
  @extend .pb-button-secondary;

  &:hover {
    color: var(--pb-color-primary);
    border-color: var(--pb-color-primary);
  }
}

.pb-button-success.pb-button-secondary {
  @extend .pb-button-secondary;

  &:hover {
    color: var(--pb-color-success);
    border-color: var(--pb-color-success);
  }
}

.pb-button-warning.pb-button-secondary {
  @extend .pb-button-secondary;

  &:hover {
    color: var(--pb-color-warning);
    border-color: var(--pb-color-warning);
  }
}

.pb-button-danger.pb-button-secondary {
  @extend .pb-button-secondary;

  &:hover {
    color: var(--pb-color-danger);
    border-color: var(--pb-color-danger);
  }
}
</style>
